<style>
    .mailModal {
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>
<template>
    <div>
        <ApplyListTemplate applyListClass="currencyReward">
            <template slot="applyQueryForm">
                <Form ref="searchForm" :model="searchForm" inline :label-width="180" class="search-form rui-query-form">
                    <div class="applyQuerySearchRow">
                        <div class="applyQueryHead"></div>
                        <div class="applyQuerySearchItem">
                            <FormItem prop="typeId">
                                <div>
                                    <Select v-model="searchForm.typeId" @on-change="handleSearch" placeholder="奖励类型" prefix="ios-search" clearable >
                                        <Option v-for="item in typeList" :value='item.rewardTypeid'
                                                :key="item.rewardTypeid">{{ item.typename }}
                                        </Option>
                                    </Select>
                                    <a :style="{display:'block',width:'40px',lineHeight: '24px',marginLeft: '16px'}"  @click="dropDown">
                                        {{dropDownContent}}
                                        <Icon :type="dropDownIcon"></Icon>
                                    </a>
                                </div>
                            </FormItem>
                        </div>
                    </div>
                    <div v-if="drop" class="applyQuerySearchMore table-card">
                        <div  class="applyQuerySearchMoreRow">
                            <div class="rui-query-form-item">
                                <Form-item label="年度">
                                    <DatePicker value-format="yyyy-MM-dd HH:mm:ss" type="year" v-model="searchForm.year"
                                                placeholder="请选择" style="width: 200px"></DatePicker>
                                </Form-item>
                            </div>
                            <div class="rui-query-form-item">
                                <Form-item label="季度">
                                    <Select v-model="searchForm.quarter" placeholder="请选择" clearable style="width: 200px">
                                        <Option v-for="item in quarterList" :value='item.code' :key="item.code">{{ item.name }}
                                        </Option>
                                    </Select>
                                </Form-item>
                            </div>
                            <div class="rui-query-form-item">
                                <Form-item label="状态">
                                    <Select v-model="searchForm.status" placeholder="请选择" clearable style="width: 200px">
                                        <Option v-for="item in statusList" :value='item.code' :key="item.code">{{ item.name}}
                                        </Option>
                                    </Select>
                                </Form-item>
                            </div>
                        </div>
                        <div style="text-align: center">
                            <Button @click="handleSearch" type="primary">查询</Button>
                            <Button @click="handleReset">重置</Button>
                        </div>
                    </div>
                </Form>
            </template>
            <template slot="applyQueryTable">
                <Table :loading="loading" :columns="columns" :data="data" sortable="custom" ref="table">
                    <template slot-scope="{ row, index }" slot="action">
                        <div class="btn-no-border">
                            <Button ghost v-if="row.status==='1'"  style="margin-right:5px" type="primary" size="small"
                                    @click="determine(row)">确认
                            </Button>
                            <Button ghost v-if="row.status==='2'"  style="margin-right:5px" type="primary" size="small"
                                    @click="mail(row)">邮寄
                            </Button>
                            <Button ghost v-if="row.status==='9'" style="margin-right:5px" type="primary" size="small"
                                     @click="account(row)">到账
                            </Button>
                        </div>
                    </template>
                    <template slot-scope="{ row, index }" slot="status">
                        <div>
                            <span v-if="row.status==='1'" style="color: #ff593f">{{row.name}}</span>
                            <span v-if="row.status==='2'" style="color: #58ff3e">{{row.name}}</span>
                            <span v-if="row.status==='3'" style="color: #ff4260">{{row.name}}</span>
                            <span v-if="row.status==='4'" style="color: #3c4cff">{{row.name}}</span>
                            <span v-if="row.status==='5'" style="color: #53ffcc">{{row.name}}</span>
                            <span v-if="row.status==='6'" style="color: #2692ff">{{row.name}}</span>
                            <span v-if="row.status==='7'" style="color: #f7ff55">{{row.name}}</span>
                            <span v-if="row.status==='8'" style="color: #ff000d">{{row.name}}</span>
                            <span v-if="row.status==='9'" style="color: #ff38cb">{{row.name}}</span>
                            <span v-if="row.status==='10'" style="color: #ea9bff">{{row.name}}</span>
                        </div>
                    </template>
                </Table>
            </template>
            <template slot="applyQueryPage">
                <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize"
                      @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10,20,50]"
                      size="small" show-total show-elevator show-sizer></Page>
            </template>
        </ApplyListTemplate>
        <Row v-if="this.modalType == 0">
        </Row>
        <Modal :title="modalTitle" v-model="mailModalVisible" :mask-closable='false' :width="500"
               class="mailModal">
            <Form ref="mailForm" :model="mailForm" :label-width="110" :rules="mailFormValidate">
                <FormItem label="发票开具方名称" prop="dealername">
                    <Input v-model="mailForm.dealername" autocomplete="off"/>
                </FormItem>
                <FormItem label="发票号码" prop="receiptno">
                    <Input v-model="mailForm.receiptno" autocomplete="off"/>
                </FormItem>
                <FormItem label="快递单号" prop="expressno">
                    <Input v-model="mailForm.expressno" autocomplete="off"/>
                </FormItem>
                <FormItem label="发票金额" prop="receiptmoney">
                    <Input v-model="mailForm.receiptmoney" autocomplete="off"/>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" @click="cancelMail">取消</Button>
                <Button type="primary" :loading="submitLoading" @click="mailSubmit('mailForm')">提交</Button>
            </div>
        </Modal>
        <Modal :title="modalTitle" v-model="deterModalVisible" :mask-closable='false' :width="400"
               class="mailModal">
            <Form :label-width="80">
                <FormItem>
                    <Button type="warning" @click="printing">打印</Button>
                    <Button type="primary" @click="determineCheck">确认(须有回执附件)</Button>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button icon="ios-cloud-upload-outline">选取文件</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
    import {
        getStatus,
        getTypeId,
        getQuarter,
        getCurrencyRewardList,
        confirmReceiveMoney,
        confirmSendMail,
        printFile
    } from "../../api/currency-reward/currencyReward";
    import ApplyListTemplate from "_p/afs-apply/pages/common/ApplyListTemplate";

    export default {
        name: "currencyReward",
        components: { ApplyListTemplate },
        data() {
            return {
                drop: false,
                dropDownContent: "更多",
                dropDownIcon: "ios-arrow-down",
                loading: false,
                submitLoading: false,
                mailModalVisible: false,
                deterModalVisible: false,
                typeList: [],
                total: 0,
                columnstotal: 0,
                statusList: [],
                quarterList: [],
                modalType: 0,
                qaid: '',
                id:'',
                modalTitle: "",
                columnsFrom: {
                    pageNumber: 1,
                    pageSize: 10,
                },
                searchForm: {
                    pageNumber: 1,
                    pageSize: 10,
                    typeId: "",
                    status: "",
                    year: "",
                    quarter: ""
                },
                mailForm: {
                    receiptno: '',
                    expressno: '',
                    dealername:'',
                    receiptmoney: '',
                    qaid: '',
                    id: ''
                },
                columns: [
                    {
                        title: '序号',
                        type: 'index',
                        width: 80,
                        align: 'center',
                        ellipsis: true,
                        tooltip: true,
                    }, {
                        title: "状态",
                        key: "status",
                        align: "center",
                        minWidth: 80,
                        slot: "status",
                    },
                    {
                        title: "年度",
                        key: "year",
                        align: "center",
                        minWidth: 80,
                    },
                    {
                        title: "季度",
                        key: "qname",
                        align: "center",
                        minWidth: 80,
                    },
                    {
                        title: "季度优胜奖名称",
                        key: "awardname",
                        align: "center",
                        minWidth: 180,
                    },
                    {
                        title: "总得分",
                        key: "totalscore",
                        align: "center",
                        minWidth: 80,
                    },
                    {
                        title: "金额",
                        key: "money",
                        align: "center",
                        minWidth: 100
                    },
                    {
                        title: "放款时间",
                        key: "loantime",
                        align: "center",
                        minWidth: 150
                    },
                    {
                        title: "操作",
                        key: "action",
                        minWidth: 50,
                        align: "center",
                        fixed: "right",
                        slot: "action"
                    }
                ],
                data: [],
                // searchFormValidate: {
                //     typeId: [
                //         {required: true, message: "请选择奖励类型", trigger: "change"}
                //     ]
                // },
                mailFormValidate: {
                    receiptno: [
                        {required: true, message: "请填写发票号码", trigger: "blur"}
                    ],
                    expressno: [
                        {required: true, message: "请填写快递单号", trigger: "blur"}
                    ],
                    receiptmoney: [
                        {required: true, message: "请填写发票金额", trigger: "blur"},
                        {type:'number', message:'应输入数字',
                            transform(value) {
                                return Number(value);
                            }
                        },
                    ],
                    dealername:[
                        {required: true, message: "请填写发票开具方名称", trigger: "blur"}
                    ]
                },
            }
        },
        methods: {
            //查询按钮操作
            handleSearch() {
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                this.queryData();
            },
            //多条件分页查询
            queryData(pageNumber = 1, pageSize = 10) {
                // if (this.searchForm.typeId == "" || this.searchForm.typeId == null) {
                //     this.$Message.error("请选择奖励类型");
                //     return;
                // }
                if (this.searchForm.year != "") {
                    this.searchForm.year = new Date((this.searchForm.year.getTime() + (8 * 60 * 60 * 1000)));
                }
                let params = {
                    page: pageNumber,
                    pagesize: pageSize,
                    rewardTypeid: this.searchForm.typeId,
                    year: this.searchForm.year == "" ? "" : this.searchForm.year.getFullYear().toString(),
                    state: this.searchForm.status,
                    quarter: this.searchForm.quarter
                };
                getCurrencyRewardList(params).then(res => {
                    if (res.code === "0000") {
                        this.data = res.data.records;
                        this.total = res.data.total;
                    }
                });
            },
            determine(row) {
                this.id=row.id;
                this.deterModalVisible = true;
            },
            printing() {
                let params={
                    id:this.id,
                    type:"rewardSignletter"
                };

                printFile(params).then(res =>{
                    if(res.code==="0000"){
                        console.log("下载成功");
                    }
                })
            },
            determineCheck() {
                alert("确认上传回执");
            },
            //打开邮寄表单
            mail(row) {
                this.modalType = 0;
                this.modalTitle = "邮寄信息";
                this.$refs.mailForm.resetFields();
                this.qaid = row.id;
                this.mailModalVisible = true;
            },
            //提交邮寄信息
            mailSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        let expresslist = [];
                        let express = {
                            id: "",
                            receiptno: this.mailForm.receiptno,
                            expressno: this.mailForm.expressno,
                            dealer: this.mailForm.dealerName,
                            receiptmoney: this.mailForm.receiptmoney
                        };
                        expresslist.push(express);
                        let param = {
                            qaid: this.qaid,
                            list: expresslist
                        };
                        confirmSendMail(param).then(res => {
                            this.operationLoading = false;
                            if (res.code === "0000") {
                                if (res.data.code === 0) {
                                    this.$Message.success(res.data.message);
                                } else {
                                    this.$Message.error(res.data.message);
                                }
                            }
                        });
                        this.mailModalVisible = false;
                    } else {
                        this.$Message.error('请补全信息');
                        this.mailModalVisible = true;
                    }
                })
            },
            //取消邮寄
            cancelMail() {
                this.$refs.mailForm.resetFields();
                this.mailModalVisible = false;
            },
            //确认收款
            account(row) {
                this.$Modal.confirm({
                    title: "提示",
                    content: "贷额奖励是否已到账?",
                    onOk: () => {
                        let param = {
                            qasubid: row.id
                        }
                        this.operationLoading = true;
                        confirmReceiveMoney(param).then(res => {
                            this.operationLoading = false;
                            if (res.code === "0000") {
                                if (res.data.code === 0) {
                                    this.$Message.success(res.data.message);
                                } else {
                                    this.$Message.error(res.data.message);
                                }
                                this.queryData();
                            }
                        });
                    }
                });
            },
            //改变当前页码
            changePage(v) {
                this.searchForm.pageNumber = v;
                this.queryData(v, this.searchForm.pageSize);
            },
            //改变页码数量
            changePageSize(v) {
                this.searchForm.pageSize = v;
                this.queryData(this.searchForm.pageNumber, v);
            },
            //改变当前页码
            changeColumnsPage(v) {
                this.columnsFrom.pageNumber = v;
                this.queryDetail(v, this.columnsFrom.pageSize);
            },
            //改变页码数量
            changeColumnsPageSize(v) {
                this.columnsFrom.pageSize = v;
                this.queryDetail(this.columnsFrom.pageNumber, v);
            },
            //重置表单数据,并重新加载数据
            handleReset() {
                //this.$refs.searchForm.resetFields();
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                this.searchForm.year = "";
                this.searchForm.quarter = "";
                this.searchForm.status = "";
                this.searchForm.typeId="";
                this.queryData();
            },
            //获取奖励列表
            gettypeList() {
                let params = null;
                getTypeId(params).then(res => {
                    this.operationLoading = false;
                    if (res.code === "0000") {
                        this.typeList = res.data.data;
                    }
                });
            },
            //获取状态
            getStatusList() {
                let params = null;
                getStatus(params).then(res => {
                    this.operationLoading = false;
                    if (res.code === "0000") {
                        this.statusList = res.data.result.data;
                    }
                });
            },
            //获取季度
            getQuarterList() {
                let params = null;
                getQuarter(params).then(res => {
                    this.operationLoading = false;
                    if (res.code === "0000") {
                        this.quarterList = res.data.data;
                    }
                });
            },
            dropDown() {
                if (this.drop) {
                    this.dropDownContent = "更多";
                    this.dropDownIcon = "ios-arrow-down";
                } else {
                    this.dropDownContent = "收起";
                    this.dropDownIcon = "ios-arrow-up";
                }
                this.drop = !this.drop;
            },
        },
        mounted() {
            this.gettypeList();
            this.getStatusList();
            this.getQuarterList();
            this.handleSearch();
        }
    }
</script>
